<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="css/res.css">
    <link rel="stylesheet" href="./font_fpoui2lh1h/iconfont.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>


</head>

<body>
    <script src="js/axios.min.js"></script>
    <script src="js/api.js"></script>

    <div class="res-box">
        <div class="res-box-left">
            <div class="res-box-left-top">
                <h3>注册成为会员</h3>
                <p style="color: #ccc;">我是已注册用户，前往 <a href="login.html">登录</a></p>
                <!-- 单选框 -->
                <p class="danxuan"><span>称谓</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="man">
                    <label for="man">男士</label>
                    <input type="radio" name="man">
                    <label for="man">女士</label>
                    <input type="radio" name="man">
                    <label for="man">女士</label>
                </p>
                <!--  -->
                <p class="phones">您的邮箱/手机号<span>*</span>
                    <br/>
                    <input type="text">
                    <p class="tip1">请输入您的邮箱或手机号码</p>
                </p>
                <p class="password">密码<span>*</span>
                    <br/>
                    <input type="text">
                    <p class="tip2">请输入密码</p>
                </p>

            </div>

            <!--  -->
            <div class="res-box-left-bottom">
                <input type="checkbox" class="checkbox">我同意依照本使用条款和隐私政策对我的个人信息进行收集和使用；我已阅读并确认被给予充分机会理解该使用条款和隐私政策的内容。<span>*</span>
                <br>
                <input type="button" class="resbtn" value="立即注册">
            </div>
        </div>

        <div class="res-box-right">
            <!-- 关闭按钮 -->
            <div class="res-box-right-top">
                <div class="offbtn"> <i class="iconfont icon-close" style="font-size: 30px;"></i></div>
                <span class="must-write">（*必填项）</span>
            </div>
            <div class="res-box-right-top-bottom">
                <p class="xingming">姓名
                    <br/>
                    <input type="text">
                    <p class="password">确认密码<span>*</span>
                        <br/>
                        <input type="text">
                        <p class="tip3">两次密码输入不相同</p>
                    </p>
            </div>
        </div>
    </div>
    <script>
        let username = false;
        let password = false;
        let check = false;
        let tip1 = document.querySelector(".tip1");
        let tip2 = document.querySelector(".tip2");
        let tip3 = document.querySelector(".tip3");
        console.log(tip2, tip3);
        $(".phones input").blur(function() {
            let res = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
            if (res.test(this.value)) {
                username = true;
                console.log("成功");
                tip1.style.display = "none";

            } else {
                username = false;
                tip1.style.display = "block";
            }
        })

        $(".password input").eq(0).blur(function() {
            let res = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            if (res.test(this.value)) {
                password = true;
                console.log("成功");
            } else if (this.value == "") {
                password = false;
                console.log("失败1");
                tip2.style.display = "block";
            } else {
                password = false;
                console.log("失败");
                tip2.style.display = "block";
            }
        })

        $(".checkbox").click(function() {
                if ($(".checkbox").is(':checked')) {
                    check = true;
                } else {
                    check = false;
                }
            })
            // 关闭按钮
        $(".offbtn").click(function() {
            location.href = "index.html"

        })

        $(".resbtn").click(function() {
            if (username && password && check) {
                console.log("ok");
                // $.ajax({
                //     url: regAPI, // 必填，请求的地址
                //     type: 'get', // 选填，请求方式，默认是 GET（忽略大小写）
                //     data: {
                //         username: $(".phones input").val(),
                //         password: $(".password input").eq(0).val()
                //     },
                //     success(res) {
                //         // console.log("123");

                //         location.href = "login.html";
                //     },
                // })
                let username = $(".phones input").val();
                let password = $(".password input").eq(0).val();
                axios.get(regAPI, {
                    params: {
                        username: username,
                        password: password
                    }
                }).then((res) => {
                    let {
                        data
                    } = res;
                    console.log(data);
                    if (data.code == 1) {
                        location.href = "login.html";
                        // localStorage.setItem("username", username)
                        // localStorage.setItem("password", password)
                    } else {
                        alert("用户已经存在")
                    }
                })

            } else {
                tip1.style.display = "block";
                tip2.style.display = "block";
                tip3.style.display = "block";
            }





        })
    </script>
</body>

</html>